<template>
  <main>
    <div class="passage">
      <!-- 文章标题和作者信息 -->
      <header>
        <!-- 文章标题 -->
        <h1>
          {{ article.title }}
        </h1>
        <!-- 作者信息 -->
        <div class="poster">
          <!-- 头像 -->
          <div class="poster_avatar" @click="$router.push(`/otherHome/passages/${personInfo.userId}`)">
            <img :src="personInfo.avatarUrl" alt="">
          </div>
          <!-- 信息 -->
          <div class="info">
            <div class="name">
              <div class="poster_name" @click="$router.push(`/otherHome/passages/${personInfo.userId}`)">{{
                article.poster_name }}</div>
              <div class="follow" v-show="personInfo.userId != userStore().userId" @click="follow"
                :class="{ isFollow: isFollowed }">
                {{ isFollowed ? '已关注' : '关注 +' }}
              </div>
            </div>
            <div class="poster_count" @click="$router.push(`/otherHome/passages/${personInfo.userId}`)">
              <span>关注:{{ personInfo.follow }}</span>
              <span>粉丝:{{ personInfo.fans }}</span>
            </div>
          </div>
        </div>
      </header>
      <!-- 文章内容 -->
      <div class="content">
        <article class="page" v-html="article.content">
        </article>
      </div>
      <!-- 文章其他信息 -->
      <div class="other">
        <div class="time">
          <span class="create">创建时间: {{ article.publish_time }}</span>
          &nbsp;
          <span class="create">更新时间: {{ article.update_time ? article.update_time : article.publish_time }}</span>
        </div>
        <div class="count">
          点赞: {{ article.likes_count }} <i class="iconfont icon-good" :class="{ active: isLiked }" @click="like"></i>
          浏览: {{ article.views_count }} <i class="iconfont icon-eye"></i>
        </div>
      </div>
    </div>
    <Comment />
  </main>
</template>

<script setup>
import { reqAddLike, reqGetPassageById } from '@/apis/passage';
import { reqFollow, reqGetUserInfo, reqIsFollow } from '@/apis/user';
import { reactive, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import UserInfo from '../MyHome/UserInfo.vue';
import Comment from '@/components/Comment.vue';
import userStore from '@/stores/modules/user';
const $route = useRoute()

let isLiked = ref(false)
let isFollowed = ref(false)
// 文章id
let passageId = ref($route.params.id)

// 文章信息
let article = reactive({

})

// 作者信息
let personInfo = reactive({

})
onMounted(() => {
  getArticle()
})

// 获取文章信息
const getArticle = async () => {
  let res = await reqGetPassageById(passageId.value)
  if (res.code == 200) {
    Object.assign(article, res.data);
    article.publish_time = formatDate(article.publish_time)
    article.update_time = formatDate(article.update_time ? article.update_time : article.publish_time)
    getUser()
  } else {
    console.log('获取文章信息失败：', res.msg)
  }
}

// 获取作者信息
const getUser = async () => {
  let res = await reqGetUserInfo(article.poster_id)
  if (res.code == 200) {
    Object.assign(personInfo, res.data);
    isFollow()
  } else {
    console.log('获取作者信息失败：', res.msg)
  }
}

// 格式化时间
const formatDate = (date) => {
  return (date.slice(0, 10).split('-').join('/') + ' ' + date.slice(11, 16))
}

const like = async () => {
  let res = await reqAddLike({ userId: userStore().userId, passageId: article.id })
  if (res.code == 200) {
    if (res.data == 1) {
      isLiked.value = true
      getArticle()
    } else {
      alert('已点赞过该文章')
    }
  } else {
    console.log('点赞失败：', res.msg)

  }
}

const follow = async (params) => {
  const res = await reqFollow({ followerId: userStore().userId, followeeId: personInfo.userId })
  if (res.code == 200) {
    isFollowed.value = true

  }
}

const isFollow = async () => {
  console.log(userStore().userId);
  const res = await reqIsFollow({ followerId: userStore().userId, followeeId: personInfo.userId })
  if (res.code == 200) {
    if (res.data == true) {
      isFollowed.value = true
    }
  }
}
</script>

<style lang="scss" scoped>
main {
  margin: .1667rem auto;
  width: 85%;

  .passage {
    box-shadow: .05rem .05rem .05rem .0333rem #ccc;
    background-color: #fff;

    // 文章标题和作者信息
    header {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: .1667rem;
      padding: .1667rem 0rem 0;

      // 文章标题
      h1 {
        width: 60%;
        font-size: .4rem;
        font-weight: bold;
        text-align: center;
      }

      // 作者信息
      .poster {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .1667rem;
        border: .0167rem solid #ccc;
        border-radius: .0833rem;
        width: 20%;
        height: 1.1667rem;

        // 头像
        .poster_avatar {
          background-color: #579;
          border-radius: 25%;
          width: .8333rem;
          height: .8333rem;
          overflow: hidden;

          img {
            width: 100%;
          }
        }

        // 信息
        .info {
          display: flex;
          flex-direction: column;
          gap: .1667rem;
          cursor: pointer;

          .name {
            display: flex;
            align-items: center;
            gap: .1667rem;

            .poster_name {
              width: 1.5rem;
              font-size: .3rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .follow {
              background-color: #fc7113;
              border-radius: .0833rem;
              padding: .0833rem;
              font-size: .2667rem;
              color: #fff;
            }

            .isFollow {
              background-color: #ccc;
              border-radius: .0833rem;
              padding: .0833rem;
              font-size: .2667rem;
              color: #fff;

            }
          }

          .poster_count {
            display: flex;
            gap: .2rem;
            font-size: .2333rem;
          }
        }
      }
    }

    // 文章内容
    .content {
      padding: .0667rem .2667rem;

      .page {
        background-image:
          linear-gradient(to bottom, transparent calc(100% - 0.02rem), #eee 0.02rem);
        background-size: 100% .5rem;
        padding: 0 .1667rem .1667rem;
        font-size: .3333rem;
        line-height: .5rem;
        text-indent: 2em;
      }
    }

    // 文章其他信息
    .other {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 .4rem .2rem;
      font-size: .27rem;

      i {
        font-size: .27rem;
        cursor: pointer
      }

      .active {
        color: #fc7113;
        font-weight: bold;
      }
    }
  }
}
</style>